<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-page-header @back="close" content="详情"> </el-page-header>
      </div>
      <!-- <el-avatar :size="50" src="../../../assets/common/head_img1.png"></el-avatar> -->
      <div class="info-wrap" v-if="info">
        <el-card>
          <div slot="header" class="clearfix">
            <span>患者信息</span>
          </div>
          <el-descriptions title="" :column="3">
            <el-descriptions-item label="就诊号">{{
              info.visitId
            }}</el-descriptions-item>
            <el-descriptions-item label="患者姓名">{{
              info.name
            }}</el-descriptions-item>
            <el-descriptions-item label="患者性别">{{
              info.gender
            }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{
              info.birth
            }}</el-descriptions-item>
            <el-descriptions-item label="费用类别">{{
              info.feeType
            }}</el-descriptions-item>
            <el-descriptions-item label="身高(cm)">{{
              info.height
            }}</el-descriptions-item>
            <el-descriptions-item label="体重(kg)">{{
              info.weight
            }}</el-descriptions-item>
            <el-descriptions-item label="过敏药物">{{
              info.alergyDrugs
            }}</el-descriptions-item>
            <el-descriptions-item label="是否孕妇">{{
              info.pregnant ? "是" : "否"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否哺乳">{{
              info.lact ? "是" : "否"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否肝功能不全">{{
              info.hepatical
            }}</el-descriptions-item>
            <el-descriptions-item label="是否肾功能不全">{{
              info.renal
            }}</el-descriptions-item>
            <el-descriptions-item label="是否胰腺功能不全">{{
              info.pancreas
            }}</el-descriptions-item>
            <el-descriptions-item label="患者身份类别">{{
              info.identityType
            }}</el-descriptions-item>
            <el-descriptions-item label="肌酐值">{{
              info.scr
            }}</el-descriptions-item>
            <el-descriptions-item label="肌酐值单位(例：umol/l)">{{
              info.scrUnit
            }}</el-descriptions-item>
            <el-descriptions-item label="孕周(周)">{{
              info.gestationAge
            }}</el-descriptions-item>
            <el-descriptions-item label="是否早产儿">{{
              info.pretermBirth
            }}</el-descriptions-item>
            <el-descriptions-item label="疾病史">{{
              info.drugHistory
            }}</el-descriptions-item>
            <el-descriptions-item label="家族疾病史">{{
              info.familyDiseaseHistory
            }}</el-descriptions-item>
            <el-descriptions-item label="患者基因">{{
              info.geneticDisease
            }}</el-descriptions-item>
            <el-descriptions-item label="医生姓名">{{
              info3.name
            }}</el-descriptions-item>
            <el-descriptions-item label="医生职称">{{
              info3.position
            }}</el-descriptions-item>
            <el-descriptions-item label="科室">{{
              info3.deptName
            }}</el-descriptions-item>
            <el-descriptions-item label="诊断">{{
              info2.diagnosises
            }}</el-descriptions-item>
            <el-descriptions-item label="处方笺">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-document"
                @click="openPDF(info2.sigUrl)"
                v-hasPermi="['pr:consultation:edit']"
                >点击查看</el-button
              >
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
      <div class="info-wrap" v-if="info">
        <el-card>
          <div slot="header" class="clearfix">
            <span>药品信息</span>
          </div>
          <el-table
            :data="drugList"
            border
            height="400"
            style="width: 100%; "
          >
            <el-table-column label="药品名称" align="center" prop="drugLoName" width="200"/>
            <el-table-column label="药品编码" align="center" prop="drugLoId" width="180"/> 
            <el-table-column label="药品规格" align="center" prop="bak04" width="160"/>
            <el-table-column label="用法" align="center" prop="administration" width="100"/>
            <el-table-column label="单次剂量" align="center" prop="dosage" >
              <template slot-scope="scope">
                <span>{{ `${scope.row.dosage}${scope.row.dosageUnit}` }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="剂量单位" align="center" prop="dosageUnit" /> -->
            <!-- <el-table-column label="频次值" align="center" prop="freqCount" /> -->
            <el-table-column label="频次" align="center" prop="freqInterval" width="110">
              <template slot-scope="scope">
                <span>{{ `每${scope.row.freqIntervalUnit}${scope.row.freqInterval}次` }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="频次间隔单位" align="center" prop="freqIntervalUnit" width="110"/> -->
            <el-table-column label="药品使用天数" align="center" prop="course" width="110"/>
            <el-table-column label="开药数量" align="center" prop="pkgCount" >
              <template slot-scope="scope">
                <span>{{ `${scope.row.pkgCount}${scope.row.pkgUnit}` }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="包装单位" align="center" prop="pkgUnit" /> -->
            <!-- <el-table-column label="药品剂型" align="center" prop="bak03" /> -->
            <el-table-column label="开始用药时间" align="center" prop="startDay" width="110"/>
            <el-table-column label="停止用药时间" align="center" prop="endDay" width="110"/>
            <el-table-column label="开单科室" align="center" prop="deptCode" />
            <el-table-column label="开单医生姓名" align="center" prop="doctorName" width="110"/>
            <el-table-column label="开单医生职称" align="center" prop="title" width="110"/>
            <el-table-column label="处方日期" align="center" prop="presDate" width="110"/>
            <el-table-column label="处方序列号" align="center" prop="presSeqId" width="160"/> 
            <el-table-column label="生产厂家" align="center" prop="bak05" width="180"/>
            <el-table-column label="药品问题级别" align="center" prop="highestWarningLevel" width="110"/>
            <el-table-column label="药品备注" align="center" prop="drugRemark" />
            <el-table-column label="处方类型标识" align="center" prop="bak01" width="110"/>
            <el-table-column label="抗菌药警告级别" align="center" prop="alertLevels" width="120"/>
            <el-table-column label="抗菌药授权级别" align="center" prop="authorityLevels" width="120"/>
          </el-table>
        </el-card>
      </div>
      <!-- <el-divider></el-divider> -->
      <!-- <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        style="height: 100%"
      >
        <el-tab-pane label="诊断信息" name="first"
          ><diagnosticMessage :id="id"></diagnosticMessage
        ></el-tab-pane>
        <el-tab-pane label="处方信息" name="second"
          ><prescription :id="id"></prescription
        ></el-tab-pane>
        <el-tab-pane label="推送订单" name="thirdly"
          ><pushOrder :id="id"></pushOrder
        ></el-tab-pane>
      </el-tabs> -->
    </el-card>
  </div>
</template>

<script>
import { getPatient, getDiagnose, getDoctor, listAdvices } from "@/api/hl/rx";
import prescription from "./prescription.vue";
import diagnosticMessage from "./diagnosticMessage.vue";
import pushOrder from "./pushOrder.vue";

export default {
  dicts: ["yy_visit_type", "yy_push_status"],
  components: {
    prescription,
    diagnosticMessage,
    pushOrder,
  },
  data() {
    return {
      // 假设有初始数据
      info: null, //用户信息
      info2: null, //诊断信息
      info3: null, //医生信息
      drugList: [], //药品列表
      outpatientNo: "",
      id: "",
      activeName: "first",
    };
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;
    this.getDetail1(); //患者信息
    this.getDetail2(); //诊断信息
    this.getDetail3(); //诊断信息
    this.getList(); //药品列表
  },
  methods: {
    openPDF(base64String, filename) {
      const url = "data:application/pdf;base64," + base64String;
      const newWindow = window.open();
      newWindow.document.write(
        '<iframe width="100%" height="100%" src="' + url + '"></iframe>'
      );
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /** 患者信息 */
    getDetail1() {
      getPatient(this.id).then((response) => {
        this.info = response.data;
      });
    },
    /** 患者信息 */
    getDetail2() {
      getDiagnose(this.id).then((response) => {
        this.info2 = response.data;
      });
    },
    /** 医生信息 */
    getDetail3() {
      getDoctor(this.id).then((response) => {
        this.info3 = response.data;
      });
    },
    /** 药品列表 */
    getList() {
      listAdvices({ pageNum: 1, pageSize: 1000, patientPresId: this.id }).then(
        (response) => {
          this.drugList = response.rows;
        }
      );
    },
    /** 关闭按钮 */
    close() {
      const obj = {
        path: "/hl/rx",
        query: { t: Date.now(), pageNum: this.$route.query.pageNum },
      };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>

<style scoped lang="scss">
.info-wrap {
  display: flex;
  margin-bottom: 28px;
  .headImg {
    margin-right: 28px;
    display: block;
    width: 50px;
    height: 50px;
  }
}
.box-card {
  min-height: calc(100vh - 136px);
}
.amount-wrap {
  margin-top: 24px;
  .amount {
    font-weight: bold;
    display: flex;
    align-self: center;
    justify-content: flex-end;
    .num {
      color: #f72d38;
      min-width: 100px;
      text-align: right;
    }
  }
}
</style>
